// 引入矢量图样式
require("../../iconfont/iconfont.css");

// 引入公共样式
require('../../assets/css/css.less')

// 引入css样式
require('./course-detail.less')

// 获取axios工具函数
const request = require('../../utils/request')

window.onload = () => {

    // 获取dom
    const back = document.querySelector('.back');
    const video = document.querySelector('#video');
    const play1 = document.querySelector('#play1');
    const stop = document.querySelector('#stop');
    const tip = document.querySelector('.tip');
    const tips = document.querySelector('.tips');
    const num1 = document.querySelector('#num1');
    const num2 = document.querySelector('#num2');
    const num3 = document.querySelector('#num3');
    const candy = document.querySelector('#candy');
    const photo = document.querySelector('#photo');
    const content = document.querySelector('.content');
    const exer21 = document.querySelector('#exer21');
    const apparatus2 = document.querySelector('.apparatus2');

    // 服务器地址
    const API = "http://fitness.h5.itsource.cn:3701";

    // console.log(location.search);
    const courseId = location.search.split('=')[1]
        // console.log(courseId);

    // 获取数据
    function getData() {
        request.get('/api/train/courseDetail', {
            params: {
                id: courseId,
            }
        }).then(res => {
            console.log(res.data);
            // 解构数据
            let { errno, data } = res.data;
            // 判断
            if (errno === 0) {
                // 把训练视频保存到本地给 play页面用
                localStorage.setItem('fragments', JSON.stringify(data.fragments))
                    // 渲染
                video.src = API + data.fragments[0].videoUrl;
                candy.textContent = data.name;
                num1.textContent = data.calorie;
                num2.textContent = data.time;
                num3.textContent = data.peoplenum;
                photo.src = API + data.imgurl
                content.textContent = data.desc;
                exer21.textContent = data.frequency;
                apparatus2.textContent = data.instrument;







            }
        })



    }

    // 初始化请求
    getData()


    // 获取本地数据
    // const fragments = JSON.parse(localStorage.getItem('fragments'))
    // console.log(fragments);

    // 点击顶部按钮
    back.addEventListener('click', function() {
        history.back()
    })
    let flag = true;
    // 点击视频播放按钮播放
    play1.addEventListener('click', (e) => {
        video.play();
        play1.style.display = 'none';
        tip.style.display = 'none';
        stop.style.display = 'block';
        e.stopPropagation()

    })

    // 当点击视频时显示或者隐藏暂停按钮

    tips.addEventListener('click', () => {
            // 判断是否显示播放按钮
            if (play1.style.display === 'none') {
                if (flag) {
                    stop.style.display = 'none'
                } else {
                    stop.style.display = 'block'
                }
                flag = !flag
            }
        })
        // 点击停止按钮停止播放
    stop.addEventListener('click', function(e) {
            video.pause()
            stop.style.display = 'none'
            e.stopPropagation()
            play1.style.display = 'block'
        })
        // 视频结束显示播放按钮
    video.addEventListener('ended', () => {
        play1.style.display = 'block';
        stop.style.display = 'none'
    })
}